import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Spin, Divider } from 'antd';
import { NoDataC, SecondHeaderC, IconC } from '../../../../components';
import style from './default.less';

@connect(({ profitAndLossM, loading }) => ({
  profitAndLossM,
  loading,
}))
export default class Info extends PureComponent {
  state = {
    infoDate: {},
    portfolioCode: '',
  };

  componentDidMount() {
    this.getData(this.props);
  }

  // 入参改变时执行的方法
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.num !== this.props.num) {
      this.getData(this.props);
    }
  }

  // 获取数据
  getData = (data) => {
    const { dispatch } = this.props;

    let datas = {
      timeRange: data.index,
      beginDate: data.beginDate,
      endDate: data.endDate,
    };
    if (data.portfolioCode != '') {
      datas = {
        ...datas,
        portfolioCode: data.portfolioCode,
        // 8800102
      };
    } else if (data.portfolioCodeList != '') {
      datas = {
        ...datas,
        portfolioCodeList: data.portfolioCodeList,
      };
    } else {
      return;
    }
    dispatch({
      type: 'profitAndLossM/getPnlData',
      payload: datas,
      callback: (res) => {
        if (res.code == 0) {
          this.setState({
            infoDate: res.data,
          });
        } else {
          this.setState({
            infoDate: {},
          });
        }
      },
    });
  };

  // 数字处理成千分位
  changeNumber = (e) => {
    let value;
    if (isNaN(e)) {
      value = e;
    } else {
      value = Number(e)
        .toFixed(2)
        .replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
    }
    return value;
  };

  // 组合
  showPortfolio = () => {
    const { infoDate } = this.state;
    const { dailyProfit } = infoDate;
    const { portfolioDailyProfit } = infoDate;

    return (
      <div style={{ height: '30px' }}>
        <Row>
          <Col span={11} style={{ textAlign: 'center' }}>
            {dailyProfit && this.record(dailyProfit, '产品日盈亏')}
          </Col>

          <Col span={1}>
            <Divider type='vertical' />
          </Col>
          <Col span={11} style={{ textAlign: 'center' }}>
            {portfolioDailyProfit && this.record(portfolioDailyProfit, '组合日盈亏')}
          </Col>
        </Row>
      </div>
    );
  };

  // 产品
  showInfo = () => {
    const { infoDate } = this.state;
    const { dailyProfit } = infoDate;
    const { pastProfit } = infoDate;

    return (
      <div style={{ height: '30px' }}>
        <Row>
          <Col span={11} style={{ textAlign: 'center' }}>
            {dailyProfit && this.record(dailyProfit)}
          </Col>

          <Col span={1}>
            <Divider type='vertical' />
          </Col>
          <Col span={11} style={{ textAlign: 'center' }}>
            {pastProfit && this.record(pastProfit, '成立以来盈亏')}
          </Col>
        </Row>
      </div>
    );
  };

  record = (row, name) => {
    return (
      <div className={style.infoStyle}>
        <span>{`${name || row.name || '日盈亏'}（${name == '成立以来盈亏' ? '截止' : ''}${row.endDate}）`}</span>
        <span className={row.profitAmount === null ? '' : row.profitAmount >= 0 ? style.rednumber : style.grenumber}>{`${
          row.profitAmount === null ? '--' : this.changeNumber(row.profitAmount || 0)
        }`}</span>
        {row.pnlDesc ? row.dayPnlFlag == 'up' ? <IconC type={'upArrowRed'} iconType={'original'} /> : <IconC type={'downArrowGreen'} iconType={'original'} /> : null}
        {row.pnlDesc ? <span className={row.dayPnlFlag == 'up' ? style.rednumber : style.grenumber}>{`(${row.pnlDesc})`}</span> : null}
      </div>
    );
  };

  // 产品组
  showPortfolioCodeListInfo = () => {
    const { infoDate } = this.state;
    const { portfolioGroupDailyProfit } = infoDate;
    const { pastProfitList } = infoDate;

    return (
      portfolioGroupDailyProfit && (
        <div>
          <div style={{ margin: '20px auto', textAlign: 'center' }}>{portfolioGroupDailyProfit && this.record(portfolioGroupDailyProfit, '产品组日盈亏')}</div>

          <div style={{ display: 'flex' }}>
            <div style={{ width: '48%' }}>
              {pastProfitList.map(
                (x, ind) =>
                  ind % 2 == 0 && (
                    <div key={ind} style={{ textAlign: 'center', height: '30px' }}>
                      {this.record(x)}
                    </div>
                  ),
              )}
            </div>
            <div>
              <Divider type='vertical' style={{ height: '100%' }} />
            </div>

            <div style={{ width: '48%' }}>
              {pastProfitList.map(
                (x, ind) =>
                  ind % 2 == 1 && (
                    <div key={ind} style={{ textAlign: 'center', height: '30px' }}>
                      {this.record(x)}
                    </div>
                  ),
              )}
            </div>
          </div>
        </div>
      )
    );
  };

  render() {
    const { loading, portfolioName } = this.props;

    return (
      <div>
        <div className={style.bondDeviation}>
          <SecondHeaderC title={`${portfolioName}`} />
          <Card bordered={false}>
            {/* <div className="tringle" > </div> */}
            <div className={style.cardBodyInfo} style={{ minHeight: '30px' }}>
              <Spin spinning={loading.effects['profitAndLossM/getPnlData'] == true}>
                {/* 产品 */}
                {this.state.infoDate.pastProfit && this.showInfo()}
                {/* 产品组 */}
                {this.state.infoDate.portfolioGroupDailyProfit && this.showPortfolioCodeListInfo()}
                {/* 组合 */}
                {this.state.infoDate.portfolioDailyProfit && this.showPortfolio()}

                {JSON.stringify(this.state.infoDate) === '{}' && <NoDataC />}
              </Spin>
            </div>
          </Card>
        </div>
      </div>
    );
  }
}
